<template>
  <h1 class="row-title">普通引入</h1>
  <div class="row">
    <ct-icon icon="house" />
    <ct-icon icon="circle-user"></ct-icon>
    <ct-icon icon="image"></ct-icon>
    <ct-icon icon="file"></ct-icon>
    <ct-icon icon="camera"></ct-icon>
    <ct-icon icon="calendar"></ct-icon>
  </div>
  <h1 class="row-title">设置不同大小和颜色</h1>
  <div class="row">
    <ct-icon icon="alarm-clock" size="2x" color="red" />
    <ct-icon icon="cloud" size="2x" color="blue" />
    <ct-icon icon="truck" size="2x" color="#000" />
    <ct-icon icon="thumbs-up" size="2x" color="rgba(255, 99, 0, 0.8)" />
    <ct-icon icon="face-smile" size="2x" color="purple" />
    <ct-icon icon="headphones" size="2x" color="brown" />
  </div>
  <h1 class="row-title">动画效果</h1>
  <div class="row">
    <ct-icon size="2x" icon="bell" beat />
    <ct-icon size="2x" icon="user" beat-fade />
    <ct-icon size="2x" icon="comment" bounce />
    <ct-icon size="2x" icon="envelope" fade />
    <ct-icon size="2x" icon="globe" shake />
    <ct-icon size="2x" icon="trophy" spin />
  </div>
  <h1 class="row-title">翻转与旋转</h1>
  <div class="row">
    <ct-icon icon="eye" size="2x" spin-reverse />
    <ct-icon icon="clipboard" size="2x" spin-pulse />
    <ct-icon icon="list" rotation="90" size="2x" />
    <ct-icon icon="video" rotation="180" size="2x" />
    <ct-icon icon="film" rotation="270" size="2x" />
    <ct-icon icon="book" filp="both" size="2x" />
  </div>
  <h1 class="row-title">添加自定义属性</h1>
  <div class="row">
    <ct-icon icon="bomb" size="2x" type="danger" />
    <ct-icon icon="lock" size="2x" type="primary" />
    <ct-icon icon="plus" size="2x" type="success" />
    <ct-icon icon="train-tram" size="2x" type="info" />
    <ct-icon icon="underline" size="2x" type="warning" />
    <ct-icon icon="torii-gate" size="2x" type="error" />
  </div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
